<template>
    <div class="home b">
        <div class="a">
            <ul class="layui-row layui-col-space15">
                <li class="layui-col-sm6">
                    <div
                        style="background-color: #16baaa;color:whitesmoke;padding:20px 30px;border-radius:2px;border-radius: var(--global-border-radius)">
                        <p>总销售额</p>
                        <p style="font-size: 20px;padding-top: 10px;">
                            <lay-count-up :startVal="0" :endVal="20000" :decimalPlaces="2"></lay-count-up>
                        </p>
                    </div>
                </li>
                <li class="layui-col-sm6">
                    <div
                        style="background-color: #16baaa;color:whitesmoke;padding:20px 30px;border-radius:2px;border-radius: var(--global-border-radius)">
                        <p>门店数量</p>
                        <p style="font-size: 20px;padding-top: 10px;">
                            <lay-count-up :startVal="0" :endVal="12" :decimalPlaces="2"></lay-count-up>
                        </p>
                    </div>
                </li>
                <li class="layui-col-sm6">
                    <div
                        style="background-color: #16baaa;color:whitesmoke;padding:20px 30px;border-radius:2px;border-radius: var(--global-border-radius)">
                        <p>网站用户</p>
                        <p style="font-size: 20px;padding-top: 10px;">
                            <lay-count-up :startVal="0" :endVal="10"></lay-count-up>
                        </p>
                    </div>
                </li>
                <li class="layui-col-sm6">
                    <div
                        style="background-color: #16baaa;color:whitesmoke;padding:20px 30px;border-radius:2px;border-radius: var(--global-border-radius)">
                        <p>待处理订单</p>
                        <p style="font-size: 20px;padding-top: 10px;color: tomato;">
                            1
                        </p>
                    </div>
                </li>
            </ul>
            <div class="div flex">
                <div class="left">
                    <div ref="chartContainer" id="chartContainer"></div>
                </div>
                <div class="right">
                    <lay-table :columns="columns8" height="500px" :data-source="dataSource8" even size="xs">
                        <template #monthTurnover="{ row }">
                            <p style="color: #16baaa;font-size: 12px">{{ row.monthTurnover }}</p>
                        </template>
                    </lay-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const chartContainer = ref(null);
onMounted(() => {
    // 使用ECharts绘制图表
    const chart = echarts.init(chartContainer.value);
    // 这里可以根据需要配置和绘制图表，例如：
    chart.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['鞋子', '裤子', '衣服']
        },
        xAxis: [
            {
                type: 'category',
                data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '销售量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} 件'
                }
            }
        ],
        series: [
            {
                name: '鞋子',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 件';
                    }
                },
                data: [
                    50, 80, 120, 100, 90, 150, 200
                ]
            },
            {
                name: '裤子',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 件';
                    }
                },
                data: [
                    30, 60, 80, 70, 40, 100, 120
                ]
            },
            {
                name: '衣服',
                type: 'line',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' 件';
                    }
                },
                data: [100, 120, 130, 110, 150, 180, 200]
            }
        ]

    });
});

const columns8 = [
    {
        title: "编号",
        width: "80px",
        key: "id"
    },
    {
        title: "店铺",
        key: "name"
    }, {
        title: "电话",
        width: "120px",
        key: "email"
    },
    {
        title: "城市",
        key: "city"
    }, {
        title: "月份",
        key: "month",
        ellipsisTooltip: true,
    },
    {
        title: "营业额",
        sort: "desc",
        key: "monthTurnover",
        customSlot: "monthTurnover",
        ellipsisTooltip: true,
    }
]

const dataSource8 = [
    { id: "10001", name: "广西旗舰店", city: "广西南宁", email: "18800000001", month: '5月', monthTurnover: 5500 },
    { id: "10002", name: "上海旗舰店", city: "上海徐汇区", email: "18800000002", month: '5月', monthTurnover: 10000 },
    { id: "10003", name: "台湾旗舰店", city: "台湾台北区", email: "18800000003", month: '5月', monthTurnover: 3400 },
    { id: "10004", name: "湖南旗舰店", city: "湖南长沙", email: "18800000004", month: '5月', monthTurnover: 1500 },
    { id: "10005", name: "广州旗舰店", city: "广州天河区", email: "18800000005", month: '5月', monthTurnover: 4300 },
    { id: "10006", name: "北京旗舰店", city: "北京朝阳区", email: "18800000006", month: '5月', monthTurnover: 3300 },
    { id: "10007", name: "深圳旗舰店", city: "深圳福田区", email: "18800000007", month: '5月', monthTurnover: 5000 },
    { id: "10008", name: "重庆旗舰店", city: "重庆渝中区", email: "18800000008", month: '5月', monthTurnover: 1000 },
    { id: "10009", name: "成都旗舰店", city: "成都武侯区", email: "18800000009", month: '5月', monthTurnover: 800 },
    { id: "10010", name: "杭州旗舰店", city: "杭州西湖区", email: "188000000010", month: '5月', monthTurnover: 1100 },
    { id: "10011", name: "南京旗舰店", city: "南京秦淮区", email: "188000000011", month: '5月', monthTurnover: 19000 },
    { id: "10012", name: "苏州旗舰店", city: "苏州吴中区", email: "188000000012", month: '5月', monthTurnover: 1900 },
]
</script>
<style scoped>
.div {
    width: 100%;
    margin: 50px 20px
}

.left {
    width: 600px;
    height: 500px;
}


.right {
    float: right;
    padding: 0 20px;
}

#chartContainer {
    width: 600px;
    height: 500px;
}
</style>